<template>
  <el-menu
    :default-active="defultActive"
    :default-openeds="defaultOpeneds"
    unique-opened
    class="el-menu-vertical"
  >
    <el-sub-menu-comp
      v-for="child in htmlNav"
      :key="child.id"
      :html-nav="child"
    />
  </el-menu>
</template>
<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import ElSubMenuComp from "./comps/elSubMenuComp.vue";
import htmlNav from "../../untils/htmlNav.js";

const defultActive = ref(null);
const defaultOpeneds = ref(null);
let outerId;
// 页面刷新时，将左侧导航指定至当前页面 route.path
// 深层遍历寻找
const route = useRoute();
const deepLoop = (param) => {
  // 如果是数组
  if (param instanceof Array) {
    param.forEach((item) => {
      deepLoop(item);
    });
    // 如果是对象
  } else if (param instanceof Object) {
    if (param.children.length > 0) {
      deepLoop(param.children);
    } else if (`/${param.link}` === route.path) {
      defaultOpeneds.value = [outerId];
      defultActive.value = param.link;
    }
  }
};

htmlNav.some((item) => {
  // 保留下最外层的id
  outerId = item.id;
  return deepLoop(item);
});
console.log("useRouter", route);
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
.el-menu-item {
  padding: 0;
}
.el-menu-vertical {
  :deep(.el-sub-menu__title) span,
  :deep(.el-menu-item) a {
    color: $main-color;
  }
  .el-sub-menu__title {
    margin-bottom: 1px;
    box-shadow: 0px 1px 2px rgba($color: $main-color, $alpha: 0.1);
  }
  .router-link-active li {
    background-color: $main-color;
    color: $hover-color;
  }

  > li {
    box-shadow: 0px 1px 2px rgba($color: $main-color, $alpha: 0.4);
  }
}
</style>
